<template>
  <a-modal
    width="800px"
    :footer="null"
    :maskClosable="false"
    :closable="false"
    :mask="false"
    v-model:open="modalShow"
    :wrap-style="{ overflow: 'hidden' }"
  >
    <template #title>
      <modalTitle @close="close" :title="'楼栋详情'"></modalTitle>
    </template>
    <div style="padding: 0 10px 10px 10px">
      <div class="content">
        <div class="left">
          <!-- <moxing modelUrl="/public/img/louceng.FBX" scale="0.5" class="left-img" /> -->
          <img src="/public/img/moxing.png" alt="" class="left-img" />
        </div>
        <div class="right">
          <p class="right-text">{{ title }}</p>
          <div class="right-box" v-if="list.length">
            <div class="right-box-item" v-for="(item, index) in list" :key="index">
              <!-- 特殊人群小红点 -->
              <div class="red-dot" v-if="item.type == '2'"></div>
              <div class="item-title">{{ item.room_number }}</div>
              <div class="item-text">户主: {{ item.name }}</div>
              <div class="item-text">常住人口: {{ item.population }}人</div>
              <div class="item-text">联系方式: {{ item.mobile }}</div>
            </div>
          </div>
          <div class="right-box1" v-else>暂无住户</div>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { reactive, ref } from "vue"
import modalTitle from "../modalTitle.vue"
import moxing from "./moxing.vue"
import axios from "axios"

const modalShow = ref(false)

const close = () => {
  modalShow.value = false
}

const list = ref([])

const title = ref("")

// 只展示特殊人群
const getInfo = (data) => {
  axios({
    method: "get",
    url: "http://ylz.chuangxing.ren/api/index/get_people?room_number=" + data
  }).then((res) => {
    if (res.data.data) {
      list.value = res.data.data
      modalShow.value = true
    }
    console.log(res)
  })
}
// 全部人员
const getInfoAll = (data) => {
  axios({
    method: "get",
    url: "http://ylz.chuangxing.ren/api/index/get_people_allxy?room_number=" + data
  }).then((res) => {
    if (res.data.data) {
      list.value = res.data.data
      modalShow.value = true
    }
    console.log(res)
  })
}

const show = (e) => {
  console.log(e)
  // getInfo(e.data)
  getInfoAll(e.data)
  const arr = e.data.split("-")
  title.value = arr[0] + "栋" + arr[1] + "单元" + arr[2] + "楼"
}
defineExpose({ show, close })
</script>
<style scoped lang="scss">
.content {
  display: flex;
  gap: 10px;

  .left {
    flex: 5;

    .left-img {
      width: 100%;
      height: 100%;
    }
  }

  .right {
    flex: 5;

    .right-text {
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      text-align: center;
    }

    .right-box {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      gap: 10px;

      .right-box-item {
        flex: 0 0 calc(50% - 5px);
        display: flex;
        flex-direction: column;
        gap: 10px;
        color: #fff;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 10px;
        padding: 10px;
        box-sizing: border-box;
        position: relative;

        .red-dot {
          position: absolute;
          width: 10px;
          height: 10px;
          background: red;
          border-radius: 50%;
          top: 10px;
          right: 10px;
        }

        .item-title {
          text-align: center;
        }
      }
    }

    .right-box1 {
      text-align: center;
      color: #fff;
      font-size: 26px;
      font-weight: bold;
    }
  }
}
</style>
